<template>
	<view class="search-view">
		<!-- 地址+搜索+扫一扫+消息 -->
		<view class="position">
			<text>{{position}}</text>
			<image src="../static/index_icon/search_icon/arrow.png" mode="aspectFit" class="arrow"></image>
		</view>
		<view class="search-cont">
			<view class="search">
				<input type="text" placeholder="吉吉自习室" />
				<button type="default" class="seabtn">搜索</button>
			</view>
		</view>
		<image src="../static/index_icon/search_icon/saoyisao.png" mode="widthFix" class="scanicon"></image>
	</view>
</template>

<script>
	export default {
		name: "Xuan-Zuo",
		data() {
			return {
				position:null
			};
		},
		methods: {
			locate(){
				const that=this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude +
								',' + res
								.longitude +
								'&key=MVGBZ-R2U3U-W5CVY-2PQID-AT4VZ-PDF35',
							success(re) {
								console.log("中文位置")
								if (re.statusCode === 200) {
									console.log("获取中文街道地理位置成功")
									that.position=re.data.result.address_component.city
								} else {
									console.log("获取信息失败，请重试！")
								}
							}
						});
					}
				});
			}
		},
		mounted() {
			this.locate()
		}
	}
</script>

<!-- scoped只在当前页面生效 -->
<style scoped lang="scss">
	.search-view {
		padding: 16rpx 30rpx 24.67rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 72rpx;
		background-color: #fbfbfb;
		.position {
			color: #f28374;
			font-size: 30rpx;
			display: flex;
			flex-direction: row;
			font-weight: bold;
			gap: 15rpx;
			.arrow {
				align-items: center;
				width: 17rpx;
				height: auto;
			}
		}
		.search-cont {
			width: 66.13%;
			margin-left: 30rpx;
			margin-right: 30rpx;
			display: flex;
			height: 72rpx;
			align-items: center;
			// .search {
			// 	height: 72rpx;
			// 	line-height: 70upx;
			// 	width: 100%;
			// 	display: flex;
			// 	flex-direction: row;
			// }
			.search input {
				border: solid;
				border-color: #f28374;
				border-radius: 100rpx;
				padding-left: 40rpx;
				border-width: 5rpx;
				height: 72rpx;
				width: 100%;
				font-size: 30rpx;
				color: #666666;
			}
			.seabtn{
				float: right;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 33%;
				height: 72rpx;
				font-size: 30rpx;
				color: #ffffff;
				background-color: #f28374;
				border-radius: 100rpx;
				margin-right: -48rpx;
				margin-top: -77rpx;
			}
		}
		.scanicon{
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
